<template>
  <div class="print">
    <div class="header">
      <img src="@/assets/image/pages/order/printHeader.jpg" />
    </div>
    <div class="title"> 维修服务确认单 </div>
    <el-row class="info" type="flex" justify="space-between">
      <div>服务登记号：{{ props.printInfo.workNo }}</div>
      <div>维修日期：{{ props.printInfo.createTime }}</div>
    </el-row>
    <div class="card1">
      <el-row class="row" type="flex">
        <el-col class="col" :span="6">客户名称</el-col>
        <el-col class="col" :span="18">{{ props.printInfo.repairCompanyUser }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="col" :span="6">联系人</el-col>
        <el-col class="col" :span="6">{{ props.printInfo.username }}</el-col>
        <el-col class="col" :span="6">联系电话</el-col>
        <el-col class="col" :span="6">{{ props.printInfo.userPhone }}</el-col>
      </el-row>
      <el-row class="row" justify="space-between">
        <el-col class="col" :span="6">维修设备型号</el-col>
        <el-col class="col" :span="6">{{
          props.printInfo.materialVoList && props.printInfo.materialVoList[0].goodsModel
        }}</el-col>
        <el-col class="col" :span="6">维修部门/维修工程师</el-col>
        <el-col class="col" :span="6"
          >{{ props.printInfo.network }}/{{ props.printInfo.engineer }}</el-col
        >
      </el-row>
      <el-row class="row">
        <el-col class="col" :span="6">设备序列号</el-col>
        <el-col class="col" :span="6">{{
          props.printInfo.materialVoList &&
          props.printInfo.materialVoList[0] &&
          props.printInfo.materialVoList[0].snCodes &&
          props.printInfo.materialVoList &&
          props.printInfo.materialVoList[0].snCodes[0]?.snCode
        }}</el-col>
        <el-col class="col" :span="6">购买日期</el-col>
        <el-col class="col" :span="6">{{
          props.printInfo.materialVoList &&
          props.printInfo.materialVoList[0] &&
          props.printInfo.materialVoList[0].snCodes &&
          props.printInfo.materialVoList &&
          props.printInfo.materialVoList[0].snCodes[0]?.buyTime
        }}</el-col>
      </el-row>
    </div>
    <div class="feeTitle"> 维修收费报价明细 </div>
    <div class="table">
      <el-row class="row">
        <el-col class="col" :span="2">序号</el-col>
        <el-col class="col" :span="3">编号</el-col>
        <el-col class="col" :span="5">名称</el-col>
        <el-col class="col" :span="2">数量</el-col>
        <el-col class="col" :span="3">单价</el-col>
        <el-col v-if="isHaveDiscountPrice" class="col" :span="3">优惠</el-col>
        <el-col class="col" :span="3">金额</el-col>
        <el-col class="col" :span="isHaveDiscountPrice ? 3 : 6">备注</el-col>
      </el-row>
      <el-row v-for="(item, index) in props.printInfo.collectFeeList" :key="index" class="row">
        <el-col class="col" :span="2">{{ index + 1 }}</el-col>
        <el-col class="col" :span="3">{{ item.goodsCode }}</el-col>
        <el-col class="col" :span="5">{{ item.goodsName }}</el-col>
        <el-col class="col" :span="2">{{ item.qty }}</el-col>
        <el-col class="col" :span="3">{{ item.price }}</el-col>
        <el-col v-if="isHaveDiscountPrice" class="col" :span="3">{{
          calcDiscountPrice(item)
        }}</el-col>
        <el-col class="col" :span="3">{{ calcPrice(item) }}</el-col>
        <el-col class="col" :span="isHaveDiscountPrice ? 3 : 6">{{ item.remark }}</el-col>
      </el-row>
      <!-- <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="address"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="address"
          label="单价">
        </el-table-column>
        <el-table-column
          prop="address"
          label="金额">
        </el-table-column>
        <el-table-column
          prop="address"
          label="备注">
        </el-table-column>
      </el-table> -->
    </div>
    <div class="card3">
      <el-row class="row">
        <el-col class="col" :span="3">
          <div>费用合计</div>
          <div>（RMB）</div>
        </el-col>
        <el-col class="col" :span="9">{{
          Number(Number(props.printInfo.totalFee).toFixed(0)).toFixed(2)
        }}</el-col>
        <el-col class="col" :span="3">
          <div>实收金额</div>
          <div>（RMB）</div>
        </el-col>
        <el-col class="col" :span="9">{{
          Number(Number(props.printInfo.netReceiptsFee).toFixed(0)).toFixed(2)
        }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="col" :span="3">故障现象描述</el-col>
        <el-col class="col" :span="21" style="text-align: left">{{
          props.printInfo.content
        }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="col" :span="3">故障原因分析/维修方案</el-col>
        <el-col class="col" :span="21" style="text-align: left"
          >{{ props.printInfo.faultReson && props.printInfo.faultReson.join(',') }}
          {{
            props.printInfo.faultSolution && '/' + props.printInfo.faultSolution.join(',')
          }}</el-col
        >
      </el-row>
      <el-row class="row">
        <el-col class="col center" :span="3">用户确认</el-col>
        <el-col class="col" :span="21" style="padding: 0">
          <el-row class="row" style="border-left: none">
            <el-col class="col" :span="4">设备/配件签收方式</el-col>
            <el-col class="col" :span="4">{{ props.printInfo.signMode }}</el-col>
            <el-col class="col" :span="4">服务形式</el-col>
            <el-col class="col" :span="4">{{ props.printInfo.module }}</el-col>
            <el-col class="col" :span="4">质保类别</el-col>
            <el-col class="col" :span="4" style="border-right: none">{{
              props.printInfo.warrantyCategory
            }}</el-col>
          </el-row>
          <el-row class="row" style="border-left: none">
            <el-col class="col" :span="4">付款方式</el-col>
            <el-col class="col" :span="4">{{ props.printInfo.paymentMethod }}</el-col>
            <el-col class="col" :span="4">开票类型</el-col>
            <el-col class="col" :span="12" style="border-right: none">
              <template v-if="props.printInfo.ticketType === 1">增值税普通发票</template>
              <template v-if="props.printInfo.ticketType === 2">增值税专用发票</template>
            </el-col>
          </el-row>
          <div class="p1 sealContent">
            <div>免责声明</div>
            <div>1、通过整体检测，已告知客户设备可能存在风险。</div>
            <div>2、建议维修或更换:{{ props.printInfo.suggestedRepair }}</div>
            <div>3、实际维修或更换:{{ props.printInfo.actualRepair }}</div>
            <div>如遇特殊原因未能按照第2条建议更换的，用户自行承担可能发生的隐息，敬请理解，</div>
            <div class="sign"> 用户签名确认： </div>
            <img src="@/assets/image/seal.png" class="img" alt="" />
          </div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col class="col center" :span="3">说明</el-col>
        <el-col class="col" :span="21">
          <div class="p2">
            <div>(1)请客户对以上维修事项仔细阅读，并签字确认设备维修后的交付、付款无异议。</div>
            <div
              >(2)如选择对公方式支付，请在10个工作日内支付完毕，未能按时支付3次以上的，将不再享受对公的支付方
              式，可预付或现付方式提货。</div
            >
            <div
              >(3)异地寄修请在收到设备3日内对本单据进行签字回传，或根据快递签收记录默认签收、确认。</div
            >
            <div>(4)设备维修更换的新配件，可享受3个月免费保修期。</div>
            <div
              >(5)设备修复完成后请及时取机，当留置时间超出自送修之日起90天后，仍未取走的，则视为放弃不要由维修站自行处理(含配件类)。</div
            >
          </div>
        </el-col>
      </el-row>
      <el-row class="row1" type="flex" justify="space-between">
        <div class="col1" :span="6">深圳市施罗德工业集团有限公司客户服务中心</div>
        <div class="col1" :span="6">深圳市龙华区观澜街道新澜社区观光路1301-72号银星智界2号1101</div>
      </el-row>
      <el-row class="row1 footer" type="flex" justify="space-between">
        <div class="col1" :span="6"
          >Customer service center of Shenzhen SROD industny Group Co. Ltd</div
        >
        <div class="col1" :span="6">全国服务电话:400-6088-029</div>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { watch, ref } from 'vue'
  import { DetailPrint } from '@/typings/api/response/order'

  const props = defineProps<{
    printInfo: DetailPrint
  }>()

  /**
   * 计算金额
   * @param param - 事件参数
   */
  const calcPrice = (param) => {
    if (param.warrantyCategoryCollectFee === false) {
      return 0
    }

    return (param.qty * param.price * (param.discountPrice / 100)).toFixed(2)
  }

  /**
   * 计算优惠
   * @param item - 事件参数
   */
  const calcDiscountPrice = (param) => {
    const total = param.qty * param.price

    if (!param.warrantyCategoryCollectFee) {
      return total.toFixed(2)
    }

    return (total - total * (param.discountPrice / 100)).toFixed(2)
  }

  const isHaveDiscountPrice = ref(false)
  watch(
    () => props.printInfo,
    () => {
      if (props.printInfo && props.printInfo.collectFeeList) {
        isHaveDiscountPrice.value = props.printInfo.collectFeeList.some((item) => {
          return Number(calcDiscountPrice(item)) !== 0
        })
      }
    },
  )
</script>

<style lang="scss" scoped>
  .print {
    overflow: visible;
    display: flex;
    flex-direction: column;

    .header {
      img {
        width: 100%;
      }
    }
    .title {
      margin-top: 20px;
      text-align: center;
      font-size: 16px;
    }
    .info {
      font-size: 14px;
      margin-bottom: 5px;
    }
    .card1 {
      border-bottom: solid 1px #000;
      .row {
        border-top: solid 1px #000;
        border-left: solid 1px #000;
        .col {
          border-right: solid 1px #000;
          padding: 5px;
          text-align: center;
        }
      }
    }
    .feeTitle {
      text-align: center;
      font-size: 14px;
      padding: 5px;
    }
    .table {
      border-bottom: solid 1px #000;
      .row {
        border-top: solid 1px #000;
        border-left: solid 1px #000;
        .col {
          border-right: solid 1px #000;
          padding: 5px;
          text-align: center;
        }
      }
    }
    .card3 {
      .row {
        border-bottom: solid 1px #000;
        border-left: solid 1px #000;
        .col {
          border-right: solid 1px #000;
          padding: 5px;
          text-align: center;
          .p1 {
            text-align: left;
            padding: 5px;
            .sign {
              text-align: right;
              margin-right: 150px;
              margin-top: 10px;
              margin-bottom: 10px;
            }
          }
          .p2 {
            text-align: left;
          }
        }
      }
    }
    .footer {
      margin-top: 20px;
    }
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sealContent {
    position: relative;
    .img {
      position: absolute;
      bottom: 20px;
      right: 230px;
      width: 140px;
    }
  }
</style>

<style>
  @media print {
    @page {
      size: auto;
    }

    body,
    html {
      height: auto !important;
    }
  }
</style>
